import { GraphinData } from '@antv/graphin';
import React from 'react';
import { ConceptStyle, DomainStyle } from '../config';

export function useProcessGraphinData(graphinData: GraphinData, styleType: string) {
  const [data, setData] = React.useState<GraphinData>({ nodes: [], edges: [], combos: [] });

  const processDomianStyleData = React.useCallback(
    (ghData: GraphinData) => {
      if (styleType === 'domain') {
        const _graphinData = { ...ghData };
        const nodes = _graphinData.nodes;
        const edges = _graphinData.edges;
        nodes?.forEach((node: any) => {
          node.type = 'domain-node';
        });

        edges?.forEach((edge: any) => {
          const { name } = edge.data;
          edge.style = {
            label: {
              value: name,
              fill: DomainStyle.Color.Concept,
            },
            keyshape: {
              stroke: DomainStyle.Color.Concept,
            },
          };
        });

        setData({ ..._graphinData });
      }
    },
    [graphinData, styleType]
  );

  const processConceptStyleData = React.useCallback(
    (ghData: GraphinData) => {
      if (styleType === 'concept') {
        const _graphinData = { ...ghData };
        const nodes = _graphinData.nodes;
        const edges = _graphinData.edges;
        nodes?.forEach((node: any, idx: number) => {
          const { type, name } = node.data;
          node.type = 'graphin-circle';
          node.style = {
            // 是节点的标签，可以设置标签的值 和样式：放置方位，大小，字体颜色，偏移位置
            label: {
              /** label的名称 */
              value: name,
              /** 展示位置  'top' | 'bottom' | 'left' | 'right' | 'center'; */
              position: 'bottom',
              /** 文本填充色 */
              fill: ConceptStyle.Color[type][idx] || '#000',
              /** 文本大小 */
              fontSize: 14,
              /** 文本在各自方向上的偏移量，主要为了便于调整文本位置 */
              offset: [0, 10],
            },
            keyshape: {
              size: 40,
              stroke: ConceptStyle.Color[type][idx] || '#000',
              fill: 'transparent',
              lineWidth: 5,
              strokeOpacity: 1,
            },
            halo: {
              /** 光晕 */
              fill: ConceptStyle.Color[type][idx] || '#000',
              /** 透明度 */
              opacity: 1,
              /** 是否展示 */
              visible: false,
              /** 鼠标Hover上去样式 */
              cursor: 'pointer',
            },
          };
        });

        edges?.forEach((edge: any, idx: number) => {
          const { name } = edge.data;
          edge.style = {
            label: {
              value: name,
              fill: ConceptStyle.Color.Concept[idx] || '#000',
            },
            keyshape: {
              stroke: ConceptStyle.Color.Concept[idx] || '#000',
            },
          };
        });

        setData({ ..._graphinData });
      }
    },
    [graphinData, styleType]
  );

  React.useEffect(() => {
    if (graphinData) {
      switch (styleType) {
        case 'domain':
          processDomianStyleData(graphinData);
          break;
        case 'concept':
          processConceptStyleData(graphinData);
          break;
      }
    }
  }, [graphinData, styleType]);

  return data;
}
